<template>
  <div class="container">
    <el-dialog title="抓取经纬度" :visible.sync="dialogShow" width="1000px">
      <div class="amap-page-container">
        <el-amap-search-box
          class="search-box"
          :search-option="searchOption"
          :on-search-result="onSearchResult"
        ></el-amap-search-box>
        <el-amap
          vid="amapDemo"
          :events="events"
          :center="mapCenter"
          :zoom="zoom"
          class="amap-demo"
        >
          <el-amap-marker :position="marker" :label="label"></el-amap-marker>
        </el-amap>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmMap">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {},
  data() {
    let that = this;
    return {
      zoom: 14,
      dialogShow: false,
      address: "",
      marker: [113.625179, 34.745527],
      searchOption: {
        city: "郑州",
        citylimit: true,
      },
      label: { content: "113.625179,34.745527", offset: [30, 10] },
      mapCenter: [113.625179, 34.745527],
      events: {
        click(e) {
          console.log(e);
          that.marker = [e.lnglat.lng, e.lnglat.lat];
          that.label = {
            content: e.lnglat.lng + "," + e.lnglat.lat,
            offset: [30, 10],
          };

          // 这里通过高德 SDK 完成。
          var geocoder = new AMap.Geocoder({
            radius: 1000,
            extensions: "all",
          });
          geocoder.getAddress(that.marker, function (status, result) {
            if (status === "complete" && result.info === "OK") {
              if (result && result.regeocode) {
                that.address = result.regeocode.formattedAddress;
                that.$nextTick();
              }
            }
          });
        },
      },
    };
  },
  // 方法
  methods: {
    show(city) {
      if (city.label) {
        this.address = city.label;
        this.searchOption.city = city.label;
      }
      if(city.center){
        let l = city.center.split(',');
        this.marker = l;
        this.mapCenter = l;
        this.label = {
          content: l,
          offset: [30, 10],
        };
      }
      this.dialogShow = true;
    },
    onSearchResult(pois) {
      this.marker = [pois[0].lng, pois[0].lat];
      this.mapCenter = [pois[0].lng, pois[0].lat];
      this.address = pois[0].address;
      this.label = {
        content: pois[0].lng + "," + pois[0].lat,
        offset: [30, 10],
      };
    },
    // 确认
    confirmMap() {
      this.dialogShow = false;
      this.$emit("returnInfo", this.marker, this.address);
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  // 销毁
  destroyed() {},
};
</script>
<style lang="scss" scoped>
.amap-demo {
  height: 500px;
}

.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}

.amap-page-container {
  position: relative;
}
</style>